<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link type="text/css" rel="stylesheet"
          href="../bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <!-- 顶部搜索框模块 -->
        <div class="form-group">
            <div class="input-group">
                <h4>品牌管理</h4>
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="table table-bordered table-hover mt-2">
            <thead>
            <tr>
                <th>编号</th>
                <th>资产名称</th>
                <th>价格</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody v-if="list.length > 0">
            <!-- 把默认数据显示到表格上 -->
            <tr v-for="(l,index) in list" :key="index">
                <td>{{l.id}}</td>
                <td>{{l.name}}</td>

                <!-- 如果价格超过100，就有red这个类 -->
                <td :class="{red: l.price > 100}">{{l.price}}</td>
<!--                <td>{{l.time | formatTimer}}</td> 使用过滤器 -->
                <td>{{formattedTime(l.time)}}</td>
                <td><a href="#" @click.prevent="del(index)">删除</a></td>
            </tr>
            <tr style="background-color: #EEE">
                <td>统计:</td>
                <td colspan="2">总价钱为: {{allPrice}}</td>
                <td colspan="2">平均价: {{avgPrice}}</td>
            </tr>
            </tbody>
            <tfoot>
            <tr v-if="list.length === 0">
                <td colspan="5" style="text-align: center">暂无数据</td>
            </tr>
            </tfoot>
        </table>

        <!-- 添加资产 -->
        <form class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" v-model:value="name" class="form-control" placeholder="资产名称"/>
                </div>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <div class="input-group">
                    <input type="text" v-model:value="price" class="form-control" placeholder="价格"/>
                </div>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <!-- 阻止表单提交 -->
            <button @click.prevent="add" class="btn btn-primary">添加资产</button>
        </form>
    </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/moment.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: "", // 名称
            price: 0, // 价格
            list: [
                {id: 100, name: "外套", price: 199, time: new Date('2010-08-12')},
                {id: 101, name: "裤子", price: 34, time: new Date('2013-09-01')},
                {id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22')},
                {id: 103, name: "头发", price: 19900, time: new Date('2020-12-12')}
            ],
        },
        methods: {
            add(){
                if (this.name === "" || this.price === "" || this.price === 0){
                    alert("请输入完整信息")
                    return
                }
                this.list.push({
                    id: this.list.length + 100,
                    name: this.name,
                    price: this.price,
                    time: new Date()
                })
                this.name = ""
                this.price = 0
            },
            del(index){
                this.list.splice(index,1)
            },
            // 日期
            formattedTime(dateString) {
                return moment(dateString).format('YYYY年MM月DD日'); // 使用moment.js格式化日期
            }
        },
        computed: {
            allPrice(){
                let sum = 0
                sum = this.list.reduce((total, item) => total + Number( item.price), 0)  // 把所有的价格相加
                return sum
            },
            avgPrice(){
                return this.allPrice / this.list.length
            }
        },
        // 自定义过滤器
        filters: {
            formatTimer: function(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                return y + "年" + MM + "月" + d + "日";
            }
        },
    })
</script>

</body>
</html>
